/* 基础样式，最先加载 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 加载状态样式 */
body {
  background-color: rgb(30, 27, 75); /* bg-indigo-950 equivalent */
  color: white;
  opacity: 1;
  transition: opacity 0.3s;
}

/* 关键内容优先显示 */
.content-visibility-auto {
  content-visibility: auto;
}

/* 定义关键CSS变量，确保在其他样式前加载 */
:root {
    /* 浅色主题变量 */
    --background: 244 100% 94%;
    --foreground: 244 40% 20%;
    
    --card: 240 50% 97%;
    --card-foreground: 244 40% 20%;
    
    --primary: 255 65% 60%;
    --primary-foreground: 0 0% 100%;
    
    --secondary: 160 100% 80%;
    --secondary-foreground: 244 40% 20%;
    
    --accent: 36 100% 76%;
    --accent-foreground: 244 40% 25%;
    
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    
    --muted: 240 5% 90%;
    --muted-foreground: 240 5% 40%;

    --border: 240 10% 85%;

    /* 通用变量 */
    --radius: 0.5rem;
}

.dark {
    /* 深色主题变量 */
    --background: 244 48% 15%;
    --foreground: 244 10% 98%;
    
    --card: 244 40% 12%;
    --card-foreground: 244 10% 95%;
    
    --primary: 255 80% 65%;
    --primary-foreground: 0 0% 100%;
    
    --secondary: 160 90% 45%;
    --secondary-foreground: 0 0% 100%;
    
    --accent: 36 100% 60%;
    --accent-foreground: 244 100% 10%;
    
    --destructive: 0 100% 65%;
    --destructive-foreground: 0 0% 100%;
    
    --muted: 240 5% 20%;
    --muted-foreground: 240 5% 70%;

    --border: 240 10% 20%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* 深色主题变量 */
    --background: 244 48% 15%;
    --foreground: 244 10% 98%;
    
    --card: 244 40% 12%;
    --card-foreground: 244 10% 95%;
    
    --primary: 255 80% 65%;
    --primary-foreground: 0 0% 100%;
    
    --secondary: 160 90% 45%;
    --secondary-foreground: 0 0% 100%;
    
    --accent: 36 100% 60%;
    --accent-foreground: 244 100% 10%;
    
    --destructive: 0 100% 65%;
    --destructive-foreground: 0 0% 100%;
    
    --muted: 240 5% 20%;
    --muted-foreground: 240 5% 70%;
  
    --border: 240 10% 20%;
  }
}

/* 基础元素样式 */
@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
        position: relative;
    }
    body::after {
        content: "";
        font-size: 24px;
        position: fixed;
        z-index: 9999;
        /* 移除pointer-events: none */
        transform: translate(-50%, -50%);
        left: var(--cursor-x);
        top: var(--cursor-y);
        will-change: transform;
        transition: transform 0.05s cubic-bezier(0.23, 1, 0.32, 1);
        width: 20px;
        height: 20px;
        background: linear-gradient(to right, #6ee7b7, #60a5fa);
        border-radius: 50%;
        opacity: 0.5;
        box-shadow: 0 0 20px rgba(110, 231, 183, 0.3);
    }
    button:hover, a:hover {
    }
}

/* 导航项样式 */
@layer base {
    .nav-item {
        @apply px-4 py-1.5 rounded-full text-white/70 text-sm font-semibold hover:bg-white/10 hover:text-white transition duration-300;
    }

    .hero-ring {
        @apply absolute inset-0 border-2 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-emerald-300/5 shadow-[0_0_90px_inset] shadow-emerald-300/5
    }

    /* 自定义滚动条样式 */
    ::-webkit-scrollbar {
        width: 2px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: #6ee7b7cc;
    }
}

/* 动画效果 */
@keyframes moveLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% / 3));
  }
}

/* Animation for the friends section */
.animate-move-left {
  animation: moveLeft 30s linear infinite;
}

.animate-move-left:hover {
  animation-play-state: paused;
}

/* 工具类 */
@layer utilities {
    .container {
        @apply lg:max-w-5xl;
    }
}
